// import {Button} from 'antd';
import {useCallback, useState} from 'react';
import Button from 'react-bootstrap/Button';
import Stack from 'react-bootstrap/Stack';
import {json} from '@codemirror/lang-json';
import {basicLight} from '@uiw/codemirror-theme-basic';
import CodeMirror from '@uiw/react-codemirror';
import useDebounce from '@/components/hook/useDebounce';
import beautifyJson from '@/utils/beautifyJson';
import style from './style.module.scss';

const Home = () => {
    const [value, setValue] = useState('{}');
    const debounce = useDebounce(800);

    const handleFormat = useCallback(() => {
        const val = beautifyJson(value);
        setValue(val);
    }, [value]);

    const handleCompress = () => {
        const val = JSON.stringify(value, null, '');
        setValue(val);
    };

    const handleEscape = useCallback(() => {
        setValue(encodeURIComponent(value));
    }, [value]);

    const handleChange = useCallback((val: string) => {
        debounce(() => setValue(val));
    }, [debounce]);

    return <Stack gap={2} className={style['json-editor-root-wrapper']}>
        <div className={style['code-wrapper']}>
            <CodeMirror
                value={value}
                extensions={[json()]}
                style={{minHeight: '100%'}}
                theme={basicLight}
                onChange={handleChange}
            />
        </div>
        <Stack direction='horizontal' gap={2}>
            <Button style={{minWidth: 80}} onClick={handleFormat}>格式化</Button>
            <Button style={{minWidth: 80}} onClick={handleCompress}>压缩</Button>
            <Button style={{minWidth: 80}} onClick={handleEscape}>转义</Button>
        </Stack>
    </Stack>;
};

export default Home;
